<template>
    <!-- 弹框-->
    <a-modal
      :title="$t('请输入关闭理由')"
      :visible="visible"
      @cancel="clickCancel()"
      @ok="clickConfirm()"
      width="50%"
      :confirmLoading="confirmLoading"
    >
      <a-form-model
        
        ref="ruleForm"
        :rules="rules"
        :model="form"
        :wrapper-col="{ span: 24 }"
        labelAlign="left"
      >
        <a-form-model-item prop="cName">
          <a-input v-model="form.cName" type="textarea" />
        </a-form-model-item>
      </a-form-model>
      
      <div class="upload-wrap">
        <a-upload
          accept=".pdf, .jpg, .jpeg, .png"
          :file-list="fileList"
          action="/api/common/upload"
          :multiple="true"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <a-button type="primary" ghost icon="upload">{{ $t('all.autotext1324') }}</a-button>
        </a-upload>
      </div>
      <identityCheck
        ref="identityRef"
        :title="$t('关闭申请的身份验证')"
        @ok="handleOk"
      />
    </a-modal>
  </template>
  <script>
  import identityCheck from './identityCheck'
  
  export default {
    components: { identityCheck },
    props: {
      visible: {
        default: false,
        type: Boolean
      },
      auditStatus: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        confirmLoading: false,
        rules: {
          // 校验规则
          cName: [{ required: true, message: this.$t('请输入关闭理由') }]
        },
        confirmData: {},
        form: {},
        fileList: []
      }
    },
    methods: {
      beforeUpload (file, fileList) {
        this.fileList = []
        const list = fileList.slice(0, 5)
        if (list.some(item => item.uid === file.uid)) {
          const formatImg = /((gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
          const formatPdf = /(pdf)$/i
          const isLt5M = file.size / 1024 / 1024 < 5
  
          if (!isLt5M) {
            this.$message.error(this.$t('all.autotext1784'))
            return false
          }
          if (formatImg.test(file.type) || formatPdf.test(file.type)) {
            return true
          } else {
            this.$message.error(this.$t('all.autotext293'))
            return false
          }
        } else {
          this.$message.error(this.$t('all.autotext1785'))
          return false
        }
      },
      handleChange ({ fileList }) {
        let list = fileList.filter(item => item.status)
        this.fileList = list.map(item => {
          return {
            ...item,
            url: this.$options.filters.dealImageUrl(item.response?.data)
          }
        })
        // fix过滤文件返回为undefined的情况
        this.fileList = this.fileList.filter(item => Object.prototype.toString.call(item) === '[object Object]')
      },
      clickCancel () {
        this.form = {}
        this.fileList = []
        this.$emit('handleCloseApply')
      },
      clickConfirm () {
        if (this.form.cName === null || this.form.cName === '' || this.form.cName === undefined) {
          this.$message.error(this.$t('请输入关闭理由'))
          return false
        }
        this.$refs.identityRef.open()
        this.confirmData = {
          closeReason: this.form.cName,
          closeFile: this.fileList.length ? this.fileList[0].url : '',
          closeFileName: this.fileList.length ? this.fileList[0].name : ''
        //   auditArray: this.fileList.map(item => {
        //     return {
        //       fileName: item.name,
        //       url: item.url
        //     }
        //   })
        }
      },
      handleOk () {
        // this.comment = ''
        this.fileList = []
        console.log(this.confirmData)
        this.$emit('uploadClickConfirm', this.confirmData)
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .mark {
    .mark-title {
      font-weight: bold;
      margin-bottom: 6px;
    }
  }
  .upload-wrap {
    margin-top: 20px;
  }
  </style>
